import React, { Fragment } from 'react';
import { connect } from 'umi';
import { get as getPath } from 'object-path';
import { Row, Col, Divider, Empty, Spin, message } from 'antd';
import BraftEditor from 'braft-editor';

import { withRoutePage } from '@/utils/enhanceUtils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import 'braft-editor/dist/index.css';
import 'braft-editor/dist/output.css';
import style from './RulesDetail.less';

@withRoutePage
class RulesDetail extends React.Component {
    componentDidMount() {
        this.fetchDetail();
        document.body.onselectstart = () => false;
        document.body.oncopy = () => false;

        // 禁止剪切
        document.body.oncut = () => false;
        // 禁止粘贴
        document.body.onpaste = () => false;
    }

    componentWillUnmount() {
        document.body.onselectstart = e => e;
        document.body.oncopy = e => e;

        // 禁止剪切
        document.body.oncut = e => e;
        // 禁止粘贴
        document.body.onpaste = e => e;
    }

    fetchDetail = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'rules/fetchDetail',
            payload: {
                ruleId: getPath(this.props, 'location.query.ruleId')
            },
            callback: res => {
                if (res.code === 90003) {
                    message.error(res.msg);
                }
            }
        });
    };

    render() {
        const { loading, rules } = this.props;
        const { changeData } = rules;
        console.log(
            '<<<<<<<<<:',
            changeData.detail || 'ssssss',
            BraftEditor.createEditorState(`<div>${changeData.detail}</div>`)
        );
        const newDetail =
            '<p style="text-align:left;">1212121</p><p>12121221</p><ul><li>12121212</li><li>12121221222</li><li>121123344</li></ul><ol><li>211232334</li><li>4324454</li><li>3231345</li><li>23411234</li><li>324135</li></ol><blockquote>123231323<br/>1321313123</blockquote><pre><code>12323213132</code></pre><p><sub>13213</sub>1123     12313<sup>13123123123213</sup></p><p>💙</p><p></p><p></p><p>213132313321132</p><p>123<span style="color:#d35400">1232312312323</span></p><p><span style="color:#d35400"><strong>1231232132411</strong></span></p><p><span style="color:#d35400"><strong><em>13123123231</em></strong></span></p><p><span style="color:#d35400"><strong><em><u>23131431123</u></em></strong></span></p><p><span style="color:#d35400"><span style="text-decoration:line-through">12313324324</span></span></p><p><span style="color:#d35400"><span style="text-decoration:line-through">123</span></span><a href="13123213123" target="">13123213123</a></p><p></p><hr/><p>123213232323</p><h1>去问问</h1><p></p><div class="media-wrap image-wrap"><img src=""/></div><p></p>';
        let braftHTML = null;
        try {
            braftHTML = (
                <BraftEditor
                    controls={[]}
                    readOnly
                    style={{
                        border: 'none'
                    }}
                    value={BraftEditor.createEditorState(newDetail)}
                />
            );
        } catch (error) {
            console.log('braftHTML: ', error);
        }
        return (
            <Fragment>
                <PageHeaderWrapper>
                    <Spin spinning={loading}>
                        {changeData && changeData.id ? (
                            <div className={style.wncontainer}>
                                <Row>
                                    <Col span={24}>
                                        <p className={style.rulestitle}>{changeData.title}</p>
                                    </Col>
                                </Row>
                                <Row className={style.title} type="flex">
                                    <div
                                        className={style.rulesFrom}
                                        style={{
                                            height: '100%'
                                        }}
                                    >
                                        <span className={style.spanMr}>{changeData.startTime}</span>
                                        <Divider type="vertical" />
                                        <span className={style.spanMr}>{changeData.recvCompanyName}</span>
                                        <span className={style.spanMr}>{changeData.userName}</span>
                                    </div>
                                </Row>
                                <Row className={style.rulesText}>
                                    <Col span={14}>
                                        <pre
                                            style={{
                                                whiteSpace: 'pre-wrap',
                                                wordWrap: 'break-word'
                                            }}
                                        >
                                            {changeData.content}
                                        </pre>
                                    </Col>
                                </Row>
                                {/* <Row
                                    className={
                                        (style.noticeText,
                                        ' braft-output-content')
                                    }
                                    dangerouslySetInnerHTML={{
                                        __html: changeData.detail
                                    }}
                                /> */}
                                <Row className={style.noticeText}>{braftHTML}</Row>
                                {/* <Row>
                                    <Col span={16} className={style.fileFlex}>
                                        {changeData.ruleFile &&
                                        Array.isArray(changeData.ruleFile) &&
                                        changeData.ruleFile.length > 0
                                            ? changeData.ruleFile.map(item => (
                                                  <div
                                                      className={
                                                          style.fileDonwload
                                                      }
                                                      title={item.originName}
                                                      key={item.keyName}
                                                  >
                                                      <Icon
                                                          type="link"
                                                          className={
                                                              style.fileIcon
                                                          }
                                                      />
                                                      <span
                                                          className={
                                                              style.fileName
                                                          }
                                                      >
                                                          {item.originName}
                                                      </span>
                                                      <a
                                                          href={item.url}
                                                          className={
                                                              style.fileA
                                                          }
                                                      >
                                                          预览
                                                      </a>
                                                  </div>
                                              ))
                                            : null}
                                    </Col>
                                </Row> */}
                            </div>
                        ) : (
                            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                        )}
                    </Spin>
                </PageHeaderWrapper>
            </Fragment>
        );
    }
}
export default withRoutePage(
    connect(({ rules, loading }) => ({
        rules,
        loading: loading.models.rules
    }))(RulesDetail)
);
